<template>
  <div class="ratingSelect">
    <div class="rating-header">
      <span @click="select(2,$event)" class="base all" :class="{'active':currentTab===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
      <span @click="select(0,$event)" class="base recommend" :class="{'active':currentTab===0}">{{desc.recommend}}<span class="count">{{recommend.length}}</span></span>
      <span @click="select(1,$event)" class="base negative" :class="{'active':currentTab===1}">{{desc.negative}}<span class="count">{{negative.length}}</span></span>
    </div>
    <div class="switch" @click="toggleContent">
      <span class="icon-check_circle" :class="{'on':onlyContent}"></span>
      <span class="text">只看有内容的评论</span>
    </div>
    <div class="rating-wrapper">
      <ul v-show="ratings.length">
        <li v-show="needShow(rating.text,rating.rateType)" v-for="(rating,index) in ratings" :key="index" class="rating-item">
          <div class="user">
            <span class="username">{{rating.username}}</span>
            <img :src="rating.avatar" width="12" height="12" class="avatar"/>
          </div>
          <div class="time">{{rating.rateTime | formatDate}}</div>
          <p class="text">
            <span :class="{'icon-thumb_up':rating.rateType === 0,'icon-thumb_down':rating.rateType === 1}"></span>
            <span class="texts">{{rating.text}}</span>
          </p>
        </li>
      </ul>
      <div class="no-ratings" v-show="!ratings.length">暂无评价</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import  {formatDate} from "../../common/js/data";

  const RECOMMEND = 0;  //推荐
  const NEGATIVE = 1;  //差评
  const ALL = 2;  //全部
  export default {
    name: "ratingSelect",
    props:{
      ratings :{
        type:Array,
        default() {
          return [];
        }
      },
      //评论选项的全部/推荐/差评的切换，默认（0）是全部 必须有一个初始值
      selectType:{
        type : Number,
        default:ALL
      },
      //给switch里面的icon判断是on状态还是默认状态
      onlyContent:true,
      desc :{
        type: Object,
        default() {
          return{
            all : '全部',
            recommend : '推荐',
            negative: '吐槽'
          }
        }
      }
    },
    data() {
      return {
        currentTab : ALL
      }
    },
    filters:{
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date,'yyyy-MM-dd hh:mm')
      }
    },
    computed :{
      recommend() {
        return this.ratings.filter((rating) => {
          return rating.rateType === RECOMMEND
        })
      },
      negative() {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE
        })
      }
    },
    methods:{
      select(type,event){
        if (!event._constructed) {
          return;
        }
        this.currentTab=type
      },
      toggleContent(){
        this.onlyContent = !this.onlyContent
      },
      needShow(text,type){
        if(this.onlyContent && !text){
          return false
        }
        if(this.selectType === ALL){
          return true
        }else{
          return type === this.selectType
        }
      }
    },
    mounted(){
      this.currentTab = this.selectType
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
  .ratingSelect
    .rating-header
      font-size 0
      padding 26px 0
      margin 0 18px
      border-1px(rgba(7,17,27,0.1))
      .base
        padding 8px 12px
        font-size 12px
        border-radius 12px
        margin-right 8px
        color: rgb(77,85,93)
        &.active
          color: #fff
        .count
          margin-left 3px
          font-size 8px
        &.all
          background-color rgba(0 ,160, 220,0.2)
          &.active
            background-color rgb(0 ,160, 220)
        &.recommend
          background-color rgba(0 ,160, 220,0.2)
          &.active
            background-color rgb(0 ,160, 220)
        &.negative
          background-color rgba(77,85,93,0.2)
          &.active
            background-color rgb(77,85,93)
    .switch
      padding  12px 18px
      color rgb(147,153,159)
      border-bottom 1px solid rgba(7,17,27,0.1)
      .icon-check_circle
        display inline-block
        font-size 24px
        line-height 24px
        vertical-align top
        &.on
          color: #00c850
      .text
        font-size 12px
        line-height 24px
        display inline-block
        vertical-align top

    .rating-wrapper
      padding 0 18px
      .rating-item
        position relative
        padding 16px 0
      .user
        position absolute
        top:16px
        right:18px
        .username
          font-size 10px
          color: rgb(147,153,159)
          margin-right 6px
          line-height 13px
          display inline-block
          vertical-align top
        .avatar
          display inline-block
          vertical-align top
      .time
        font-size 10px
        color: rgb(147,153,159)
        line-height 12px
      .text
        font-size:12px
        margin-top 5px
        > span
          margin-right 3px
        .icon-thumb_up
          color: rgb(0,160,220)
        .icon-thumb_down
          color rgb(147,153,159)
        .texts
          color: rgb(7,17,27)
          line-height 16px
      .no-ratings
        font-size 14px
        color: rgb(147,153,159)
        margin-left 10px
        margin-top 10px
</style>

